.user-message {
  width: 100%;
  display: flex;
  // flex-wrap: wrap;
  &-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }
  &-sendTime{
    width: 100%;
    color: #bfbfbf;
    font-size: 12px;
    margin-top: 5px;
    padding: 0 44px;
    box-sizing: border-box;
    text-align: left;
  }
  ::v-deep .message-content {
    word-wrap: break-word;
    border: 1px solid #eee;
    border-radius: 0 8px 8px 8px;
    color: #595959;
    margin-left: 8px;
    max-width: 80%;
    max-width: 268px;
    padding: 8px 10px;
  }
}

.user-message-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 336px;

  .send-user-name {
    font-size: 12px;
    color: #8C8C8C;
    margin: 1px 10px 2px 10px;
    @include text-ellipsis();
    max-width: 100%;
  }

  .user-message-sendTime{
    padding: 0;
    // text-align: right !important;
    margin: 2px 10px 0 10px;
    width: auto;
  }
}

.user-message-right{
  flex-direction:row-reverse;

  .user-message-content {
    align-items: flex-end;
  }

  ::v-deep .message-content {
    background: $color-primary-light-1;
    border: 1px solid rgba(0,209,178,.32);
    border-radius: 8px 0 8px 8px;
    color: #595959;
    margin: 0 8px 0 0;
  }
}

.group-msg {
  color: #bfbfbf !important;
}

